<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <script>
    var gaProperty = 'UA-2577926-1';
    // Disable tracking if the opt-out cookie exists.
    var disableStr = 'ga-disable-' + gaProperty;
    if (document.cookie.indexOf(disableStr + '=true') > -1) {
      window[disableStr] = true;
    }
    function gaOptout() {
      document.cookie = disableStr + '=true; expires=Thu, 31 Dec 2099 23:59:59 UTC; path=/';
      window[disableStr] = true;
    }
    function gaOptoutRevoke() {
      document.cookie = disableStr + '=false; expires=Thu, 31 Dec 2099 23:59:59 UTC; path=/';
      window[disableStr] = false;
    }
    </script>
    <!-- Global site tag (gtag.js) - Google Analytics -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-2577926-1"></script>
    <script>
      window.dataLayer = window.dataLayer || [];
      function gtag(){dataLayer.push(arguments);}
      gtag('js', new Date());
      gtag('config', 'UA-2577926-1', { 'anonymize_ip': true });
    </script>
    <link type="text/css" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.css" />
    <script src="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.js"></script>
    <script>
    window.addEventListener("load", function() {
      window.cookieconsent.initialise({
        'palette': {
          'popup': {
            'background': '#eaf7f7',
            'text': '#5c7291'
          },
          'button': {
            'background': '#56cbdb',
            'text': '#ffffff'
          }
        },
        'theme': 'edgeless',
        'type': 'opt-out',
        'onInitialise': function (status) {
          if (!this.hasConsented()) {
            gaOptout()
          }
        },
        'onStatusChange': function(status, chosenBefore) {
          if (!this.hasConsented()) {
            gaOptout()
          }
        },
        'onRevokeChoice': function() {
          gaOptoutRevoke()
        }
      })
    });
    </script>
    <title>OpenLayers v6.13.0 API - Class: WebGLHelper</title>
    <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=fetch"></script>
    <script src="scripts/prettify/prettify.js"></script>
    <script src="scripts/prettify/lang-css.js"></script>
    <script src="scripts/jquery.min.js"></script>
    <script src="scripts/bootstrap.bundle.min.js"></script>
    <!--[if lt IE 9]>
      <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <link type="text/css" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <link type="text/css" rel="stylesheet" href="styles/prettify-tomorrow.css">
    <link type="text/css" rel="stylesheet" href="styles/bootstrap.min.css">
    <link type="text/css" rel="stylesheet" href="styles/jaguar.css">
    <link type="text/css" rel="stylesheet" href="styles/site.css">
  </head>
  <body>
    <div class="container-fluid">
      <header class="navbar navbar-expand-sm navbar-dark mb-3 py-0 fixed-top" role="navigation">
        <a class="navbar-brand" href="https://openlayers.org/"><img src="logo-70x70.png" alt="">&nbsp;OpenLayers</a>

        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#olmenu" aria-controls="olmenu" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>

        <!-- menu items that get hidden below 768px width -->
        <nav class="collapse navbar-collapse" id="olmenu">
          <ul class="navbar-nav ml-auto">
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="docdropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Docs</a>
            <div class="dropdown-menu dropdown-menu-right" aria-labelledby="docdropdown">
              <a class="dropdown-item" href="/en/latest/doc/">Docs</a>
              <div class="dropdown-divider"></div>
                <a class="dropdown-item" href="../doc/quickstart.html"><i class="fa fa-check fa-fw mr-2 fa-lg"></i>Quick Start</a>
                <a class="dropdown-item" href="../doc/faq.html"><i class="fa fa-question fa-fw mr-2 fa-lg"></i>FAQ</a>
                <a class="dropdown-item" href="../doc/tutorials/"><i class="fa fa-book fa-fw mr-2 fa-lg"></i>Tutorials</a>
                <a class="dropdown-item" href="/workshop/"><i class="fa fa-graduation-cap fa-fw mr-2 fa-lg"></i>Workshop</a>
                <div class="dropdown-divider"></div>
                <a class="dropdown-item" href="https://stackoverflow.com/questions/tagged/openlayers"><i class="fa fa-stack-overflow fa-fw mr-2"></i>Ask a Question</a>
            </div>
          </li>
          <li class="nav-item"><a class="nav-link" href="../examples/">Examples</a></li>
          <li class="nav-item active"><a class="nav-link" href="../apidoc/"><i class="fa fa-sitemap mr-1"></i>API</a></li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="codedropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Code</a>
            <div class="dropdown-menu dropdown-menu-right" aria-labelledby="codedropdown">
              <a class="dropdown-item" href="https://github.com/openlayers/openlayers"><i class="fa fa-github fa-fw mr-2 fa-lg"></i>Repository</a>
              <a class="dropdown-item" href="/download/"><i class="fa fa-download fa-fw mr-2 fa-lg"></i>Download</a>
            </div>
           </li>
          </ul>
        </nav>
      </header>
      <div id="wrap" class="row">
        <div class="navigation col-md-4 col-lg-3">
          <div class="search-wrapper">
            <div class="search">
              <input id="search" type="text" autocomplete="off" class="form-control input-sm" placeholder="Search Documentation">
            </div>
          </div>
          <div class="navigation-list-wrapper">
            <ul class="navigation-list search-empty">
<li class="item item-class toggle-manual toggle-manual-show" data-longname="module:ol/webgl/Helper~WebGLHelper" data-name="ol/webgl/helper">
    <span class="title toggle">
        <span class="fa fa-chevron-right mr-2 mt-1"></span>
        <span><a href="module-ol_webgl_Helper-WebGLHelper.html">ol​/webgl​/Helper</a></span>
    </span>
    <div class="member-list" data-type="methods">
        <span class="subtitle">Methods</span>
        <ul>
            <li data-name="bindbuffer"><a href="module-ol_webgl_Helper-WebGLHelper.html#bindBuffer">bindBuffer</a>
            <li data-name="createtexture"><a href="module-ol_webgl_Helper-WebGLHelper.html#createTexture">createTexture</a>
            <li data-name="drawelements"><a href="module-ol_webgl_Helper-WebGLHelper.html#drawElements">drawElements</a>
            <li data-name="enableattributes"><a href="module-ol_webgl_Helper-WebGLHelper.html#enableAttributes">enableAttributes</a>
            <li data-name="flushbufferdata"><a href="module-ol_webgl_Helper-WebGLHelper.html#flushBufferData">flushBufferData</a>
            <li data-name="getattributelocation"><a href="module-ol_webgl_Helper-WebGLHelper.html#getAttributeLocation">getAttributeLocation</a>
            <li data-name="getcanvas"><a href="module-ol_webgl_Helper-WebGLHelper.html#getCanvas">getCanvas</a>
            <li data-name="getgl"><a href="module-ol_webgl_Helper-WebGLHelper.html#getGL">getGL</a>
            <li data-name="getprogram"><a href="module-ol_webgl_Helper-WebGLHelper.html#getProgram">getProgram</a>
            <li data-name="getuniformlocation"><a href="module-ol_webgl_Helper-WebGLHelper.html#getUniformLocation">getUniformLocation</a>
            <li data-name="makeprojectiontransform"><a href="module-ol_webgl_Helper-WebGLHelper.html#makeProjectionTransform">makeProjectionTransform</a>
            <li data-name="preparedraw"><a href="module-ol_webgl_Helper-WebGLHelper.html#prepareDraw">prepareDraw</a>
            <li data-name="setuniformfloatvalue"><a href="module-ol_webgl_Helper-WebGLHelper.html#setUniformFloatValue">setUniformFloatValue</a>
            <li data-name="setuniformmatrixvalue"><a href="module-ol_webgl_Helper-WebGLHelper.html#setUniformMatrixValue">setUniformMatrixValue</a>
            <li data-name="useprogram"><a href="module-ol_webgl_Helper-WebGLHelper.html#useProgram">useProgram</a>
        </ul>
    </div>
              <li class="loading">Loading …
            </ul>
          </div>
        </div>

        <div class="main col-md-8 col-lg-9">
            <h1 class="page-title" data-filename="module-ol_webgl_Helper-WebGLHelper.html">Class: WebGLHelper</h1>
            <div id="latest-check" class="alert alert-warning alert-dismissible" role="alert" style="display:none">
              <button id="latest-dismiss" type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
              This documentation is for OpenLayers v<span id="package-version">6.13.0</span>. The <a id="latest-link" href="#" class="alert-link">latest</a> is v<span id="latest-version"></span>.
            </div>
            



<section class="content">

<header>
    <h2 class="my-3">
        <span class="ancestors"><a href="module-ol_webgl_Helper.html">ol/webgl/Helper</a>~</span>WebGLHelper
    </h2>
    <br>
    
      
      
        <pre class="prettyprint source"><code>import WebGLHelper from '<a href="module-ol_webgl_Helper.html">ol/webgl/Helper</a>';</code></pre>
      
    
    <div class="row p-3 ">
      <div id="ad" class="col-lg-5 order-2 align-self-center border rounded bg-light ">
        <script async type="text/javascript" src="https://cdn.carbonads.com/carbon.js?serve=CE7DV53U&placement=openlayersorg" id="_carbonads_js"></script>
      </div>
    
      <div class="class-description col-lg-7 align-self-center pl-0"><p>This class is intended to provide low-level functions related to WebGL rendering, so that accessing
directly the WebGL API should not be required anymore.</p>
<p>Several operations are handled by the <code>WebGLHelper</code> class:</p>
<h3 id="define-custom-shaders-and-uniforms">Define custom shaders and uniforms</h3>
<p>  <em>Shaders</em> are low-level programs executed on the GPU and written in GLSL. There are two types of shaders:</p>
<p>  Vertex shaders are used to manipulate the position and attribute of <em>vertices</em> of rendered primitives (ie. corners of a square).
  Outputs are:</p>
<ul>
<li><p><code>gl_Position</code>: position of the vertex in screen space</p>
</li>
<li><p>Varyings usually prefixed with <code>v_</code> are passed on to the fragment shader</p>
</li>
</ul>
<p>  Fragment shaders are used to control the actual color of the pixels drawn on screen. Their only output is <code>gl_FragColor</code>.</p>
<p>  Both shaders can take <em>uniforms</em> or <em>attributes</em> as input. Attributes are explained later. Uniforms are common, read-only values that
  can be changed at every frame and can be of type float, arrays of float or images.</p>
<p>  Shaders must be compiled and assembled into a program like so:</p>
<pre class="prettyprint source lang-js"><code>// here we simply create two shaders and assemble them in a program which is then used
// for subsequent rendering calls
const vertexShader = new WebGLVertex(VERTEX_SHADER);
const fragmentShader = new WebGLFragment(FRAGMENT_SHADER);
const program = this.context.getProgram(fragmentShader, vertexShader);
helper.useProgram(this.program);</code></pre><p>  Uniforms are defined using the <code>uniforms</code> option and can either be explicit values or callbacks taking the frame state as argument.
  You can also change their value along the way like so:</p>
<pre class="prettyprint source lang-js"><code>helper.setUniformFloatValue('u_value', valueAsNumber);</code></pre><h3 id="defining-post-processing-passes">Defining post processing passes</h3>
<p>  <em>Post processing</em> describes the act of rendering primitives to a texture, and then rendering this texture to the final canvas
  while applying special effects in screen space.
  Typical uses are: blurring, color manipulation, depth of field, filtering...</p>
<p>  The <code>WebGLHelper</code> class offers the possibility to define post processes at creation time using the <code>postProcesses</code> option.
  A post process step accepts the following options:</p>
<ul>
<li><code>fragmentShader</code> and <code>vertexShader</code>: text literals in GLSL language that will be compiled and used in the post processing step.</li>
<li><code>uniforms</code>: uniforms can be defined for the post processing steps just like for the main render.</li>
<li><code>scaleRatio</code>: allows using an intermediate texture smaller or higher than the final canvas in the post processing step.
This is typically used in blur steps to reduce the performance overhead by using an already downsampled texture as input.</li>
</ul>
<p>  The <a href="module-ol_webgl_PostProcessingPass-WebGLPostProcessingPass.html"><code>module:ol/webgl/PostProcessingPass~WebGLPostProcessingPass</code></a> class is used internally, refer to its documentation for more info.</p>
<h3 id="binding-webgl-buffers-and-flushing-data-into-them">Binding WebGL buffers and flushing data into them</h3>
<p>  Data that must be passed to the GPU has to be transferred using <a href="module-ol_webgl_Buffer-WebGLArrayBuffer.html"><code>module:ol/webgl/Buffer~WebGLArrayBuffer</code></a> objects.
  A buffer has to be created only once, but must be bound every time the buffer content will be used for rendering.
  This is done using <code>bindBuffer</code>.
  When the buffer's array content has changed, the new data has to be flushed to the GPU memory; this is done using
  <code>flushBufferData</code>. Note: this operation is expensive and should be done as infrequently as possible.</p>
<p>  When binding an array buffer, a <code>target</code> parameter must be given: it should be either <a href="module-ol_webgl.html#.ARRAY_BUFFER"><code>module:ol/webgl.ARRAY_BUFFER</code></a>
  (if the buffer contains vertices data) or <a href="module-ol_webgl.html#.ELEMENT_ARRAY_BUFFER"><code>module:ol/webgl.ELEMENT_ARRAY_BUFFER</code></a> (if the buffer contains indices data).</p>
<p>  Examples below:</p>
<pre class="prettyprint source lang-js"><code>// at initialization phase
const verticesBuffer = new WebGLArrayBuffer([], DYNAMIC_DRAW);
const indicesBuffer = new WebGLArrayBuffer([], DYNAMIC_DRAW);

// when array values have changed
helper.flushBufferData(ARRAY_BUFFER, this.verticesBuffer);
helper.flushBufferData(ELEMENT_ARRAY_BUFFER, this.indicesBuffer);

// at rendering phase
helper.bindBuffer(ARRAY_BUFFER, this.verticesBuffer);
helper.bindBuffer(ELEMENT_ARRAY_BUFFER, this.indicesBuffer);</code></pre><h3 id="specifying-attributes">Specifying attributes</h3>
<p>  The GPU only receives the data as arrays of numbers. These numbers must be handled differently depending on what it describes (position, texture coordinate...).
  Attributes are used to specify these uses. Specify the attribute names with
  <a href="module-ol_webgl_Helper-WebGLHelper.html#enableAttributes"><code>enableAttributes()</code></a> (see code snippet below).</p>
<p>  Please note that you will have to specify the type and offset of the attributes in the data array. You can refer to the documentation of <a href="https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext/vertexAttribPointer">WebGLRenderingContext.vertexAttribPointer</a> for more explanation.</p>
<pre class="prettyprint source lang-js"><code>// here we indicate that the data array has the following structure:
// [posX, posY, offsetX, offsetY, texCoordU, texCoordV, posX, posY, ...]
helper.enableAttributes([
  {
     name: 'a_position',
     size: 2
  },
  {
    name: 'a_offset',
    size: 2
  },
  {
    name: 'a_texCoord',
    size: 2
  }
])</code></pre><h3 id="rendering-primitives">Rendering primitives</h3>
<p>  Once all the steps above have been achieved, rendering primitives to the screen is done using <code>prepareDraw</code>, <code>drawElements</code> and <code>finalizeDraw</code>.</p>
<pre class="prettyprint source lang-js"><code>// frame preparation step
helper.prepareDraw(frameState);

// call this for every data array that has to be rendered on screen
helper.drawElements(0, this.indicesBuffer.getArray().length);

// finalize the rendering by applying post processes
helper.finalizeDraw(frameState);</code></pre><p>For an example usage of this class, refer to <a href="module-ol_renderer_webgl_PointsLayer-WebGLPointsLayerRenderer.html"><code>module:ol/renderer/webgl/PointsLayer~WebGLPointsLayerRenderer</code></a>.</p></div>
    
    </div>
</header>

<article>
    <div class="container-overview">
    

    
        <dl>
            
<dt class="">
    
    <div class="nameContainer">
        <div class="anchor" id="WebGLHelper">
        </div>
        <h4 class="name">
            new WebGLHelper<span class="signature">(<span class="optional">opt_options</span>)</span>
            
            

        </h4>
        
        <div class="tag-source">
            <a href="https://github.com/openlayers/openlayers/blob/v6.13.0/src/ol/webgl/Helper.js">webgl/Helper.js</a>,
            <a href="https://github.com/openlayers/openlayers/blob/v6.13.0/src/ol/webgl/Helper.js#L308">line 308</a>
        </div>
        
    </div>
    
    
</dt>
<dd class="">



    

    

    

    
    
        

<table class="params">
    <thead>
	<tr>
		
		<th>Name</th>
		
		
		<th>Type</th>
		
		<th class="last">Description</th>
	</tr>
	</thead>
	
	<tbody>
	
	
        <tr class="">
            
                <td class="name"><code>options</code></td>
            
            
            

            <td colspan=2 class="description last">
                
                <p>Options.</p>
                

<table class="params">
    <thead>
	<tr>
		
		<th>Name</th>
		
		
		<th>Type</th>
		
		<th class="last">Description</th>
	</tr>
	</thead>
	
	<tbody>
	
	
        <tr class="">
            
                <td class="name"><code>uniforms</code></td>
            
            
            
            <td class="type">
            
                
<span class="param-type">Object.&lt;string, <a href="module-ol_webgl_Helper.html#~UniformValue">module:ol/webgl/Helper~UniformValue</a>></span>

 | undefined
                
            
            </td>

            

            <td  class="description last">
                
                <p>Uniform definitions; property names must match the uniform
names in the provided or default shaders.</p></td>
        </tr>
	
	
	
        <tr class="">
            
                <td class="name"><code>postProcesses</code></td>
            
            
            
            <td class="type">
            
                
<span class="param-type">Array.&lt;<a href="module-ol_webgl_Helper.html#~PostProcessesOptions">module:ol/webgl/Helper~PostProcessesOptions</a>></span>

 | undefined
                
            
            </td>

            

            <td  class="description last">
                
                <p>Post-processes definitions</p></td>
        </tr>
	
	
	
        <tr class="">
            
                <td class="name"><code>canvasCacheKey</code></td>
            
            
            
            <td class="type">
            
                
<span class="param-type">string</span>

 | undefined
                
            
            </td>

            

            <td  class="description last">
                
                <p>The cache key for the canvas.</p></td>
        </tr>
	
	
	</tbody>
</table>
            </td>
        </tr>
	
	
	</tbody>
</table>
    
    

    
<dl class="details">
    
        
    
    
    

    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
</dl>


    

    

    

    

    

    
</dd>

        </dl>
    
    </div>

    

    
        <h3 class="subsection-title">Extends</h3>

        <ul>
            <li>module:ol/Disposable~Disposable</li>
        </ul>
    

    

    

    

    

    

    

    
        <h3 class="subsection-title">Methods</h3>

        <dl>
            
            
<dt class="">
    
    <div class="nameContainer">
        <div class="anchor" id="bindBuffer">
        </div>
        <h4 class="name">
            bindBuffer<span class="signature">(buffer)</span>
            
            

        </h4>
        
        <div class="tag-source">
            <a href="https://github.com/openlayers/openlayers/blob/v6.13.0/src/ol/webgl/Helper.js">webgl/Helper.js</a>,
            <a href="https://github.com/openlayers/openlayers/blob/v6.13.0/src/ol/webgl/Helper.js#L489">line 489</a>
        </div>
        
    </div>
    
    
</dt>
<dd class="">



    
    <div class="description">
        <p>Just bind the buffer if it's in the cache. Otherwise create
the WebGL buffer, bind it, populate it, and add an entry to
the cache.</p>
    </div>
    

    

    

    
    
        

<table class="params">
    <thead>
	<tr>
		
		<th>Name</th>
		
		
		<th>Type</th>
		
		<th class="last">Description</th>
	</tr>
	</thead>
	
	<tbody>
	
	
        <tr class="">
            
                <td class="name"><code>buffer</code></td>
            
            
            
            <td class="type">
            
                
<span class="param-type"><a href="module-ol_webgl_Buffer-WebGLArrayBuffer.html">module:ol/webgl/Buffer~WebGLArrayBuffer</a></span>


                
            
            </td>

            

            <td  class="description last">
                
                <p>Buffer.</p></td>
        </tr>
	
	
	</tbody>
</table>
    
    

    
<dl class="details">
    
        
    
    
    

    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
</dl>


    

    

    

    

    

    
</dd>

        
            
            
<dt class="">
    
    <div class="nameContainer">
        <div class="anchor" id="createTexture">
        </div>
        <h4 class="name">
            createTexture<span class="signature">(size, <span class="optional">opt_data</span>, <span class="optional">opt_texture</span>)</span><span class="fa fa-arrow-circle-right"></span><span class="type-signature returnType">{WebGLTexture}</span>
            
            

        </h4>
        
        <div class="tag-source">
            <a href="https://github.com/openlayers/openlayers/blob/v6.13.0/src/ol/webgl/Helper.js">webgl/Helper.js</a>,
            <a href="https://github.com/openlayers/openlayers/blob/v6.13.0/src/ol/webgl/Helper.js#L1063">line 1063</a>
        </div>
        
    </div>
    
    
</dt>
<dd class="">



    
    <div class="description">
        <p>Will create or reuse a given webgl texture and apply the given size. If no image data
specified, the texture will be empty, otherwise image data will be used and the <code>size</code>
parameter will be ignored.
Note: wrap parameters are set to clamp to edge, min filter is set to linear.</p>
    </div>
    

    

    

    
    
        

<table class="params">
    <thead>
	<tr>
		
		<th>Name</th>
		
		
		<th>Type</th>
		
		<th class="last">Description</th>
	</tr>
	</thead>
	
	<tbody>
	
	
        <tr class="">
            
                <td class="name"><code>size</code></td>
            
            
            
            <td class="type">
            
                
<span class="param-type">Array.&lt;number></span>


                
            
            </td>

            

            <td  class="description last">
                
                <p>Expected size of the texture</p></td>
        </tr>
	
	
	
        <tr class="">
            
                <td class="name"><code>data</code></td>
            
            
            
            <td class="type">
            
                
<span class="param-type">ImageData</span>
|

<span class="param-type">HTMLImageElement</span>
|

<span class="param-type">HTMLCanvasElement</span>

 | undefined
                
            
            </td>

            

            <td  class="description last">
                
                <p>Image data/object to bind to the texture</p></td>
        </tr>
	
	
	
        <tr class="">
            
                <td class="name"><code>texture</code></td>
            
            
            
            <td class="type">
            
                
<span class="param-type">WebGLTexture</span>

 | undefined
                
            
            </td>

            

            <td  class="description last">
                
                <p>Existing texture to reuse</p></td>
        </tr>
	
	
	</tbody>
</table>
    
    

    
<dl class="details">
    
        
    
    
    

    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
</dl>


    

    

    

    

    
    
    


<h5>Returns:</h5>
The generated texture
<br />

    

    
</dd>

        
            
            
<dt class="">
    
    <div class="nameContainer">
        <div class="anchor" id="drawElements">
        </div>
        <h4 class="name">
            drawElements<span class="signature">(start, end)</span>
            
            

        </h4>
        
        <div class="tag-source">
            <a href="https://github.com/openlayers/openlayers/blob/v6.13.0/src/ol/webgl/Helper.js">webgl/Helper.js</a>,
            <a href="https://github.com/openlayers/openlayers/blob/v6.13.0/src/ol/webgl/Helper.js#L624">line 624</a>
        </div>
        
    </div>
    
    
</dt>
<dd class="">



    
    <div class="description">
        <p>Execute a draw call based on the currently bound program, texture, buffers, attributes.</p>
    </div>
    

    

    

    
    
        

<table class="params">
    <thead>
	<tr>
		
		<th>Name</th>
		
		
		<th>Type</th>
		
		<th class="last">Description</th>
	</tr>
	</thead>
	
	<tbody>
	
	
        <tr class="">
            
                <td class="name"><code>start</code></td>
            
            
            
            <td class="type">
            
                
<span class="param-type">number</span>


                
            
            </td>

            

            <td  class="description last">
                
                <p>Start index.</p></td>
        </tr>
	
	
	
        <tr class="">
            
                <td class="name"><code>end</code></td>
            
            
            
            <td class="type">
            
                
<span class="param-type">number</span>


                
            
            </td>

            

            <td  class="description last">
                
                <p>End index.</p></td>
        </tr>
	
	
	</tbody>
</table>
    
    

    
<dl class="details">
    
        
    
    
    

    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
</dl>


    

    

    

    

    

    
</dd>

        
            
            
<dt class="">
    
    <div class="nameContainer">
        <div class="anchor" id="enableAttributes">
        </div>
        <h4 class="name">
            enableAttributes<span class="signature">(attributes)</span>
            
            

        </h4>
        
        <div class="tag-source">
            <a href="https://github.com/openlayers/openlayers/blob/v6.13.0/src/ol/webgl/Helper.js">webgl/Helper.js</a>,
            <a href="https://github.com/openlayers/openlayers/blob/v6.13.0/src/ol/webgl/Helper.js#L1021">line 1021</a>
        </div>
        
    </div>
    
    
</dt>
<dd class="">



    
    <div class="description">
        <p>Will enable the following attributes to be read from the currently bound buffer,
i.e. tell the GPU where to read the different attributes in the buffer. An error in the
size/type/order of attributes will most likely break the rendering and throw a WebGL exception.</p>
    </div>
    

    

    

    
    
        

<table class="params">
    <thead>
	<tr>
		
		<th>Name</th>
		
		
		<th>Type</th>
		
		<th class="last">Description</th>
	</tr>
	</thead>
	
	<tbody>
	
	
        <tr class="">
            
                <td class="name"><code>attributes</code></td>
            
            
            
            <td class="type">
            
                
<span class="param-type">Array.&lt;<a href="module-ol_webgl_Helper.html#~AttributeDescription">module:ol/webgl/Helper~AttributeDescription</a>></span>


                
            
            </td>

            

            <td  class="description last">
                
                <p>Ordered list of attributes to read from the buffer</p></td>
        </tr>
	
	
	</tbody>
</table>
    
    

    
<dl class="details">
    
        
    
    
    

    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
</dl>


    

    

    

    

    

    
</dd>

        
            
            
<dt class="">
    
    <div class="nameContainer">
        <div class="anchor" id="flushBufferData">
        </div>
        <h4 class="name">
            flushBufferData<span class="signature">(buffer)</span>
            
            

        </h4>
        
        <div class="tag-source">
            <a href="https://github.com/openlayers/openlayers/blob/v6.13.0/src/ol/webgl/Helper.js">webgl/Helper.js</a>,
            <a href="https://github.com/openlayers/openlayers/blob/v6.13.0/src/ol/webgl/Helper.js#L510">line 510</a>
        </div>
        
    </div>
    
    
</dt>
<dd class="">



    
    <div class="description">
        <p>Update the data contained in the buffer array; this is required for the
new data to be rendered</p>
    </div>
    

    

    

    
    
        

<table class="params">
    <thead>
	<tr>
		
		<th>Name</th>
		
		
		<th>Type</th>
		
		<th class="last">Description</th>
	</tr>
	</thead>
	
	<tbody>
	
	
        <tr class="">
            
                <td class="name"><code>buffer</code></td>
            
            
            
            <td class="type">
            
                
<span class="param-type"><a href="module-ol_webgl_Buffer-WebGLArrayBuffer.html">module:ol/webgl/Buffer~WebGLArrayBuffer</a></span>


                
            
            </td>

            

            <td  class="description last">
                
                <p>Buffer.</p></td>
        </tr>
	
	
	</tbody>
</table>
    
    

    
<dl class="details">
    
        
    
    
    

    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
</dl>


    

    

    

    

    

    
</dd>

        
            
            
<dt class="">
    
    <div class="nameContainer">
        <div class="anchor" id="getAttributeLocation">
        </div>
        <h4 class="name">
            getAttributeLocation<span class="signature">(name)</span><span class="fa fa-arrow-circle-right"></span><span class="type-signature returnType">{number}</span>
            
            

        </h4>
        
        <div class="tag-source">
            <a href="https://github.com/openlayers/openlayers/blob/v6.13.0/src/ol/webgl/Helper.js">webgl/Helper.js</a>,
            <a href="https://github.com/openlayers/openlayers/blob/v6.13.0/src/ol/webgl/Helper.js#L916">line 916</a>
        </div>
        
    </div>
    
    
</dt>
<dd class="">



    
    <div class="description">
        <p>Will get the location from the shader or the cache</p>
    </div>
    

    

    

    
    
        

<table class="params">
    <thead>
	<tr>
		
		<th>Name</th>
		
		
		<th>Type</th>
		
		<th class="last">Description</th>
	</tr>
	</thead>
	
	<tbody>
	
	
        <tr class="">
            
                <td class="name"><code>name</code></td>
            
            
            
            <td class="type">
            
                
<span class="param-type">string</span>


                
            
            </td>

            

            <td  class="description last">
                
                <p>Attribute name</p></td>
        </tr>
	
	
	</tbody>
</table>
    
    

    
<dl class="details">
    
        
    
    
    

    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
</dl>


    

    

    

    

    
    
    


<h5>Returns:</h5>
attribLocation
<br />

    

    
</dd>

        
            
            
<dt class="">
    
    <div class="nameContainer">
        <div class="anchor" id="getCanvas">
        </div>
        <h4 class="name">
            getCanvas<span class="signature">()</span><span class="fa fa-arrow-circle-right"></span><span class="type-signature returnType">{HTMLCanvasElement}</span>
            
            

        </h4>
        
        <div class="tag-source">
            <a href="https://github.com/openlayers/openlayers/blob/v6.13.0/src/ol/webgl/Helper.js">webgl/Helper.js</a>,
            <a href="https://github.com/openlayers/openlayers/blob/v6.13.0/src/ol/webgl/Helper.js#L665">line 665</a>
        </div>
        
    </div>
    
    
</dt>
<dd class="">



    

    

    

    
    
    

    
<dl class="details">
    
        
    
    
    

    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
</dl>


    

    

    

    

    
    
    


<h5>Returns:</h5>
Canvas.
<br />

    

    
</dd>

        
            
            
<dt class="">
    
    <div class="nameContainer">
        <div class="anchor" id="getGL">
        </div>
        <h4 class="name">
            getGL<span class="signature">()</span><span class="fa fa-arrow-circle-right"></span><span class="type-signature returnType">{WebGLRenderingContext}</span>
            
            

        </h4>
        
        <div class="tag-source">
            <a href="https://github.com/openlayers/openlayers/blob/v6.13.0/src/ol/webgl/Helper.js">webgl/Helper.js</a>,
            <a href="https://github.com/openlayers/openlayers/blob/v6.13.0/src/ol/webgl/Helper.js#L674">line 674</a>
        </div>
        
    </div>
    
    
</dt>
<dd class="">



    
    <div class="description">
        <p>Get the WebGL rendering context</p>
    </div>
    

    

    

    
    
    

    
<dl class="details">
    
        
    
    
    

    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
</dl>


    

    

    

    

    
    
    


<h5>Returns:</h5>
The rendering context.
<br />

    

    
</dd>

        
            
            
<dt class="">
    
    <div class="nameContainer">
        <div class="anchor" id="getProgram">
        </div>
        <h4 class="name">
            getProgram<span class="signature">(fragmentShaderSource, vertexShaderSource)</span><span class="fa fa-arrow-circle-right"></span><span class="type-signature returnType">{WebGLProgram}</span>
            
            

        </h4>
        
        <div class="tag-source">
            <a href="https://github.com/openlayers/openlayers/blob/v6.13.0/src/ol/webgl/Helper.js">webgl/Helper.js</a>,
            <a href="https://github.com/openlayers/openlayers/blob/v6.13.0/src/ol/webgl/Helper.js#L850">line 850</a>
        </div>
        
    </div>
    
    
</dt>
<dd class="">



    
    <div class="description">
        <p>Create a program for a vertex and fragment shader.  Throws if shader compilation fails.</p>
    </div>
    

    

    

    
    
        

<table class="params">
    <thead>
	<tr>
		
		<th>Name</th>
		
		
		<th>Type</th>
		
		<th class="last">Description</th>
	</tr>
	</thead>
	
	<tbody>
	
	
        <tr class="">
            
                <td class="name"><code>fragmentShaderSource</code></td>
            
            
            
            <td class="type">
            
                
<span class="param-type">string</span>


                
            
            </td>

            

            <td  class="description last">
                
                <p>Fragment shader source.</p></td>
        </tr>
	
	
	
        <tr class="">
            
                <td class="name"><code>vertexShaderSource</code></td>
            
            
            
            <td class="type">
            
                
<span class="param-type">string</span>


                
            
            </td>

            

            <td  class="description last">
                
                <p>Vertex shader source.</p></td>
        </tr>
	
	
	</tbody>
</table>
    
    

    
<dl class="details">
    
        
    
    
    

    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
</dl>


    

    

    

    

    
    
    


<h5>Returns:</h5>
Program
<br />

    

    
</dd>

        
            
            
<dt class="">
    
    <div class="nameContainer">
        <div class="anchor" id="getUniformLocation">
        </div>
        <h4 class="name">
            getUniformLocation<span class="signature">(name)</span><span class="fa fa-arrow-circle-right"></span><span class="type-signature returnType">{WebGLUniformLocation}</span>
            
            

        </h4>
        
        <div class="tag-source">
            <a href="https://github.com/openlayers/openlayers/blob/v6.13.0/src/ol/webgl/Helper.js">webgl/Helper.js</a>,
            <a href="https://github.com/openlayers/openlayers/blob/v6.13.0/src/ol/webgl/Helper.js#L900">line 900</a>
        </div>
        
    </div>
    
    
</dt>
<dd class="">



    
    <div class="description">
        <p>Will get the location from the shader or the cache</p>
    </div>
    

    

    

    
    
        

<table class="params">
    <thead>
	<tr>
		
		<th>Name</th>
		
		
		<th>Type</th>
		
		<th class="last">Description</th>
	</tr>
	</thead>
	
	<tbody>
	
	
        <tr class="">
            
                <td class="name"><code>name</code></td>
            
            
            
            <td class="type">
            
                
<span class="param-type">string</span>


                
            
            </td>

            

            <td  class="description last">
                
                <p>Uniform name</p></td>
        </tr>
	
	
	</tbody>
</table>
    
    

    
<dl class="details">
    
        
    
    
    

    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
</dl>


    

    

    

    

    
    
    


<h5>Returns:</h5>
uniformLocation
<br />

    

    
</dd>

        
            
            
<dt class="">
    
    <div class="nameContainer">
        <div class="anchor" id="makeProjectionTransform">
        </div>
        <h4 class="name">
            makeProjectionTransform<span class="signature">(frameState, transform)</span><span class="fa fa-arrow-circle-right"></span><span class="type-signature returnType">{<a href="module-ol_transform.html#~Transform">module:ol/transform~Transform</a>}</span>
            
            

        </h4>
        
        <div class="tag-source">
            <a href="https://github.com/openlayers/openlayers/blob/v6.13.0/src/ol/webgl/Helper.js">webgl/Helper.js</a>,
            <a href="https://github.com/openlayers/openlayers/blob/v6.13.0/src/ol/webgl/Helper.js#L934">line 934</a>
        </div>
        
    </div>
    
    
</dt>
<dd class="">



    
    <div class="description">
        <p>Modifies the given transform to apply the rotation/translation/scaling of the given frame state.
The resulting transform can be used to convert world space coordinates to view coordinates.</p>
    </div>
    

    

    

    
    
        

<table class="params">
    <thead>
	<tr>
		
		<th>Name</th>
		
		
		<th>Type</th>
		
		<th class="last">Description</th>
	</tr>
	</thead>
	
	<tbody>
	
	
        <tr class="">
            
                <td class="name"><code>frameState</code></td>
            
            
            
            <td class="type">
            
                
<span class="param-type"><a href="module-ol_PluggableMap.html#~FrameState">module:ol/PluggableMap~FrameState</a></span>


                
            
            </td>

            

            <td  class="description last">
                
                <p>Frame state.</p></td>
        </tr>
	
	
	
        <tr class="">
            
                <td class="name"><code>transform</code></td>
            
            
            
            <td class="type">
            
                
<span class="param-type"><a href="module-ol_transform.html#~Transform">module:ol/transform~Transform</a></span>


                
            
            </td>

            

            <td  class="description last">
                
                <p>Transform to update.</p></td>
        </tr>
	
	
	
        <tr class="">
            
                <td class="name"><code>frameState.pixelRatio</code></td>
            
            
            
            <td class="type">
            
                
<span class="param-type">number</span>


                
            
            </td>

            

            <td  class="description last">
                
                <p>The pixel ratio of the frame.</p></td>
        </tr>
	
	
	
        <tr class="">
            
                <td class="name"><code>frameState.time</code></td>
            
            
            
            <td class="type">
            
                
<span class="param-type">number</span>


                
            
            </td>

            

            <td  class="description last">
                
                <p>The time when rendering of the frame was requested.</p></td>
        </tr>
	
	
	
        <tr class="">
            
                <td class="name"><code>frameState.viewState</code></td>
            
            
            
            <td class="type">
            
                
<span class="param-type"><a href="module-ol_View.html#~State">module:ol/View~State</a></span>


                
            
            </td>

            

            <td  class="description last">
                
                <p>The state of the current view.</p></td>
        </tr>
	
	
	
        <tr class="">
            
                <td class="name"><code>frameState.animate</code></td>
            
            
            
            <td class="type">
            
                
<span class="param-type">boolean</span>


                
            
            </td>

            

            <td  class="description last">
                
                <p>Animate.</p></td>
        </tr>
	
	
	
        <tr class="">
            
                <td class="name"><code>frameState.coordinateToPixelTransform</code></td>
            
            
            
            <td class="type">
            
                
<span class="param-type"><a href="module-ol_transform.html#~Transform">module:ol/transform~Transform</a></span>


                
            
            </td>

            

            <td  class="description last">
                
                <p>CoordinateToPixelTransform.</p></td>
        </tr>
	
	
	
        <tr class="">
            
                <td class="name"><code>frameState.declutterTree</code></td>
            
            
            
            <td class="type">
            
                
<span class="param-type">module:rbush</span>


                
            
            </td>

            

            <td  class="description last">
                
                <p>DeclutterTree.</p></td>
        </tr>
	
	
	
        <tr class="">
            
                <td class="name"><code>frameState.extent</code></td>
            
            
            
            <td class="type">
            
                
<span class="param-type">null</span>
|

<span class="param-type"><a href="module-ol_extent.html#~Extent">module:ol/extent~Extent</a></span>


                
            
            </td>

            

            <td  class="description last">
                
                <p>Extent.</p></td>
        </tr>
	
	
	
        <tr class="">
            
                <td class="name"><code>frameState.nextExtent</code></td>
            
            
            
            <td class="type">
            
                
<span class="param-type"><a href="module-ol_extent.html#~Extent">module:ol/extent~Extent</a></span>

 | undefined
                
            
            </td>

            

            <td  class="description last">
                
                <p>Next extent during an animation series.</p></td>
        </tr>
	
	
	
        <tr class="">
            
                <td class="name"><code>frameState.index</code></td>
            
            
            
            <td class="type">
            
                
<span class="param-type">number</span>


                
            
            </td>

            

            <td  class="description last">
                
                <p>Index.</p></td>
        </tr>
	
	
	
        <tr class="">
            
                <td class="name"><code>frameState.layerStatesArray</code></td>
            
            
            
            <td class="type">
            
                
<span class="param-type">Array.&lt;<a href="module-ol_layer_Layer.html#~State">module:ol/layer/Layer~State</a>></span>


                
            
            </td>

            

            <td  class="description last">
                
                <p>LayerStatesArray.</p></td>
        </tr>
	
	
	
        <tr class="">
            
                <td class="name"><code>frameState.layerIndex</code></td>
            
            
            
            <td class="type">
            
                
<span class="param-type">number</span>


                
            
            </td>

            

            <td  class="description last">
                
                <p>LayerIndex.</p></td>
        </tr>
	
	
	
        <tr class="">
            
                <td class="name"><code>frameState.pixelToCoordinateTransform</code></td>
            
            
            
            <td class="type">
            
                
<span class="param-type"><a href="module-ol_transform.html#~Transform">module:ol/transform~Transform</a></span>


                
            
            </td>

            

            <td  class="description last">
                
                <p>PixelToCoordinateTransform.</p></td>
        </tr>
	
	
	
        <tr class="">
            
                <td class="name"><code>frameState.postRenderFunctions</code></td>
            
            
            
            <td class="type">
            
                
<span class="param-type">Array.&lt;<a href="module-ol_PluggableMap.html#~PostRenderFunction">module:ol/PluggableMap~PostRenderFunction</a>></span>


                
            
            </td>

            

            <td  class="description last">
                
                <p>PostRenderFunctions.</p></td>
        </tr>
	
	
	
        <tr class="">
            
                <td class="name"><code>frameState.size</code></td>
            
            
            
            <td class="type">
            
                
<span class="param-type"><a href="module-ol_size.html#~Size">module:ol/size~Size</a></span>


                
            
            </td>

            

            <td  class="description last">
                
                <p>Size.</p></td>
        </tr>
	
	
	
        <tr class="">
            
                <td class="name"><code>frameState.tileQueue</code></td>
            
            
            
            <td class="type">
            
                
<span class="param-type">module:ol/TileQueue~TileQueue</span>


                
            
            </td>

            

            <td  class="description last">
                
                <p>TileQueue.</p></td>
        </tr>
	
	
	
        <tr class="">
            
                <td class="name"><code>frameState.usedTiles</code></td>
            
            
            
            <td class="type">
            
                
<span class="param-type">Object.&lt;string, Object.&lt;string, boolean>></span>


                
            
            </td>

            

            <td  class="description last">
                
                <p>UsedTiles.</p></td>
        </tr>
	
	
	
        <tr class="">
            
                <td class="name"><code>frameState.viewHints</code></td>
            
            
            
            <td class="type">
            
                
<span class="param-type">Array.&lt;number></span>


                
            
            </td>

            

            <td  class="description last">
                
                <p>ViewHints.</p></td>
        </tr>
	
	
	
        <tr class="">
            
                <td class="name"><code>frameState.wantedTiles</code></td>
            
            
            
            <td class="type">
            
                
<span class="param-type">Object.&lt;string, Object.&lt;string, boolean>></span>


                
            
            </td>

            

            <td  class="description last">
                
                <p>WantedTiles.</p></td>
        </tr>
	
	
	
        <tr class="">
            
                <td class="name"><code>frameState.mapId</code></td>
            
            
            
            <td class="type">
            
                
<span class="param-type">string</span>


                
            
            </td>

            

            <td  class="description last">
                
                <p>The id of the map.</p></td>
        </tr>
	
	
	
        <tr class="">
            
                <td class="name"><code>frameState.renderTargets</code></td>
            
            
            
            <td class="type">
            
                
<span class="param-type">Object.&lt;string, boolean></span>


                
            
            </td>

            

            <td  class="description last">
                
                <p>Identifiers of previously rendered elements.</p></td>
        </tr>
	
	
	</tbody>
</table>
    
    

    
<dl class="details">
    
        
    
    
    

    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
</dl>


    

    

    

    

    
    
    


<h5>Returns:</h5>
The updated transform object.
<br />

    

    
</dd>

        
            
            
<dt class="">
    
    <div class="nameContainer">
        <div class="anchor" id="prepareDraw">
        </div>
        <h4 class="name">
            prepareDraw<span class="signature">(frameState, <span class="optional">opt_disableAlphaBlend</span>)</span>
            
            

        </h4>
        
        <div class="tag-source">
            <a href="https://github.com/openlayers/openlayers/blob/v6.13.0/src/ol/webgl/Helper.js">webgl/Helper.js</a>,
            <a href="https://github.com/openlayers/openlayers/blob/v6.13.0/src/ol/webgl/Helper.js#L556">line 556</a>
        </div>
        
    </div>
    
    
</dt>
<dd class="">



    
    <div class="description">
        <p>Clear the buffer &amp; set the viewport to draw.
Post process passes will be initialized here, the first one being bound as a render target for
subsequent draw calls.</p>
    </div>
    

    

    

    
    
        

<table class="params">
    <thead>
	<tr>
		
		<th>Name</th>
		
		
		<th>Type</th>
		
		<th class="last">Description</th>
	</tr>
	</thead>
	
	<tbody>
	
	
        <tr class="">
            
                <td class="name"><code>frameState</code></td>
            
            
            
            <td class="type">
            
                
<span class="param-type"><a href="module-ol_PluggableMap.html#~FrameState">module:ol/PluggableMap~FrameState</a></span>


                
            
            </td>

            

            <td  class="description last">
                
                <p>current frame state</p></td>
        </tr>
	
	
	
        <tr class="">
            
                <td class="name"><code>disableAlphaBlend</code></td>
            
            
            
            <td class="type">
            
                
<span class="param-type">boolean</span>

 | undefined
                
            
            </td>

            

            <td  class="description last">
                
                <p>If true, no alpha blending will happen.</p></td>
        </tr>
	
	
	
        <tr class="">
            
                <td class="name"><code>frameState.pixelRatio</code></td>
            
            
            
            <td class="type">
            
                
<span class="param-type">number</span>


                
            
            </td>

            

            <td  class="description last">
                
                <p>The pixel ratio of the frame.</p></td>
        </tr>
	
	
	
        <tr class="">
            
                <td class="name"><code>frameState.time</code></td>
            
            
            
            <td class="type">
            
                
<span class="param-type">number</span>


                
            
            </td>

            

            <td  class="description last">
                
                <p>The time when rendering of the frame was requested.</p></td>
        </tr>
	
	
	
        <tr class="">
            
                <td class="name"><code>frameState.viewState</code></td>
            
            
            
            <td class="type">
            
                
<span class="param-type"><a href="module-ol_View.html#~State">module:ol/View~State</a></span>


                
            
            </td>

            

            <td  class="description last">
                
                <p>The state of the current view.</p></td>
        </tr>
	
	
	
        <tr class="">
            
                <td class="name"><code>frameState.animate</code></td>
            
            
            
            <td class="type">
            
                
<span class="param-type">boolean</span>


                
            
            </td>

            

            <td  class="description last">
                
                <p>Animate.</p></td>
        </tr>
	
	
	
        <tr class="">
            
                <td class="name"><code>frameState.coordinateToPixelTransform</code></td>
            
            
            
            <td class="type">
            
                
<span class="param-type"><a href="module-ol_transform.html#~Transform">module:ol/transform~Transform</a></span>


                
            
            </td>

            

            <td  class="description last">
                
                <p>CoordinateToPixelTransform.</p></td>
        </tr>
	
	
	
        <tr class="">
            
                <td class="name"><code>frameState.declutterTree</code></td>
            
            
            
            <td class="type">
            
                
<span class="param-type">module:rbush</span>


                
            
            </td>

            

            <td  class="description last">
                
                <p>DeclutterTree.</p></td>
        </tr>
	
	
	
        <tr class="">
            
                <td class="name"><code>frameState.extent</code></td>
            
            
            
            <td class="type">
            
                
<span class="param-type">null</span>
|

<span class="param-type"><a href="module-ol_extent.html#~Extent">module:ol/extent~Extent</a></span>


                
            
            </td>

            

            <td  class="description last">
                
                <p>Extent.</p></td>
        </tr>
	
	
	
        <tr class="">
            
                <td class="name"><code>frameState.nextExtent</code></td>
            
            
            
            <td class="type">
            
                
<span class="param-type"><a href="module-ol_extent.html#~Extent">module:ol/extent~Extent</a></span>

 | undefined
                
            
            </td>

            

            <td  class="description last">
                
                <p>Next extent during an animation series.</p></td>
        </tr>
	
	
	
        <tr class="">
            
                <td class="name"><code>frameState.index</code></td>
            
            
            
            <td class="type">
            
                
<span class="param-type">number</span>


                
            
            </td>

            

            <td  class="description last">
                
                <p>Index.</p></td>
        </tr>
	
	
	
        <tr class="">
            
                <td class="name"><code>frameState.layerStatesArray</code></td>
            
            
            
            <td class="type">
            
                
<span class="param-type">Array.&lt;<a href="module-ol_layer_Layer.html#~State">module:ol/layer/Layer~State</a>></span>


                
            
            </td>

            

            <td  class="description last">
                
                <p>LayerStatesArray.</p></td>
        </tr>
	
	
	
        <tr class="">
            
                <td class="name"><code>frameState.layerIndex</code></td>
            
            
            
            <td class="type">
            
                
<span class="param-type">number</span>


                
            
            </td>

            

            <td  class="description last">
                
                <p>LayerIndex.</p></td>
        </tr>
	
	
	
        <tr class="">
            
                <td class="name"><code>frameState.pixelToCoordinateTransform</code></td>
            
            
            
            <td class="type">
            
                
<span class="param-type"><a href="module-ol_transform.html#~Transform">module:ol/transform~Transform</a></span>


                
            
            </td>

            

            <td  class="description last">
                
                <p>PixelToCoordinateTransform.</p></td>
        </tr>
	
	
	
        <tr class="">
            
                <td class="name"><code>frameState.postRenderFunctions</code></td>
            
            
            
            <td class="type">
            
                
<span class="param-type">Array.&lt;<a href="module-ol_PluggableMap.html#~PostRenderFunction">module:ol/PluggableMap~PostRenderFunction</a>></span>


                
            
            </td>

            

            <td  class="description last">
                
                <p>PostRenderFunctions.</p></td>
        </tr>
	
	
	
        <tr class="">
            
                <td class="name"><code>frameState.size</code></td>
            
            
            
            <td class="type">
            
                
<span class="param-type"><a href="module-ol_size.html#~Size">module:ol/size~Size</a></span>


                
            
            </td>

            

            <td  class="description last">
                
                <p>Size.</p></td>
        </tr>
	
	
	
        <tr class="">
            
                <td class="name"><code>frameState.tileQueue</code></td>
            
            
            
            <td class="type">
            
                
<span class="param-type">module:ol/TileQueue~TileQueue</span>


                
            
            </td>

            

            <td  class="description last">
                
                <p>TileQueue.</p></td>
        </tr>
	
	
	
        <tr class="">
            
                <td class="name"><code>frameState.usedTiles</code></td>
            
            
            
            <td class="type">
            
                
<span class="param-type">Object.&lt;string, Object.&lt;string, boolean>></span>


                
            
            </td>

            

            <td  class="description last">
                
                <p>UsedTiles.</p></td>
        </tr>
	
	
	
        <tr class="">
            
                <td class="name"><code>frameState.viewHints</code></td>
            
            
            
            <td class="type">
            
                
<span class="param-type">Array.&lt;number></span>


                
            
            </td>

            

            <td  class="description last">
                
                <p>ViewHints.</p></td>
        </tr>
	
	
	
        <tr class="">
            
                <td class="name"><code>frameState.wantedTiles</code></td>
            
            
            
            <td class="type">
            
                
<span class="param-type">Object.&lt;string, Object.&lt;string, boolean>></span>


                
            
            </td>

            

            <td  class="description last">
                
                <p>WantedTiles.</p></td>
        </tr>
	
	
	
        <tr class="">
            
                <td class="name"><code>frameState.mapId</code></td>
            
            
            
            <td class="type">
            
                
<span class="param-type">string</span>


                
            
            </td>

            

            <td  class="description last">
                
                <p>The id of the map.</p></td>
        </tr>
	
	
	
        <tr class="">
            
                <td class="name"><code>frameState.renderTargets</code></td>
            
            
            
            <td class="type">
            
                
<span class="param-type">Object.&lt;string, boolean></span>


                
            
            </td>

            

            <td  class="description last">
                
                <p>Identifiers of previously rendered elements.</p></td>
        </tr>
	
	
	</tbody>
</table>
    
    

    
<dl class="details">
    
        
    
    
    

    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
</dl>


    

    

    

    

    

    
</dd>

        
            
            
<dt class="">
    
    <div class="nameContainer">
        <div class="anchor" id="setUniformFloatValue">
        </div>
        <h4 class="name">
            setUniformFloatValue<span class="signature">(uniform, value)</span>
            
            

        </h4>
        
        <div class="tag-source">
            <a href="https://github.com/openlayers/openlayers/blob/v6.13.0/src/ol/webgl/Helper.js">webgl/Helper.js</a>,
            <a href="https://github.com/openlayers/openlayers/blob/v6.13.0/src/ol/webgl/Helper.js#L960">line 960</a>
        </div>
        
    </div>
    
    
</dt>
<dd class="">



    
    <div class="description">
        <p>Give a value for a standard float uniform</p>
    </div>
    

    

    

    
    
        

<table class="params">
    <thead>
	<tr>
		
		<th>Name</th>
		
		
		<th>Type</th>
		
		<th class="last">Description</th>
	</tr>
	</thead>
	
	<tbody>
	
	
        <tr class="">
            
                <td class="name"><code>uniform</code></td>
            
            
            
            <td class="type">
            
                
<span class="param-type">string</span>


                
            
            </td>

            

            <td  class="description last">
                
                <p>Uniform name</p></td>
        </tr>
	
	
	
        <tr class="">
            
                <td class="name"><code>value</code></td>
            
            
            
            <td class="type">
            
                
<span class="param-type">number</span>


                
            
            </td>

            

            <td  class="description last">
                
                <p>Value</p></td>
        </tr>
	
	
	</tbody>
</table>
    
    

    
<dl class="details">
    
        
    
    
    

    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
</dl>


    

    

    

    

    

    
</dd>

        
            
            
<dt class="">
    
    <div class="nameContainer">
        <div class="anchor" id="setUniformMatrixValue">
        </div>
        <h4 class="name">
            setUniformMatrixValue<span class="signature">(uniform, value)</span>
            
            

        </h4>
        
        <div class="tag-source">
            <a href="https://github.com/openlayers/openlayers/blob/v6.13.0/src/ol/webgl/Helper.js">webgl/Helper.js</a>,
            <a href="https://github.com/openlayers/openlayers/blob/v6.13.0/src/ol/webgl/Helper.js#L979">line 979</a>
        </div>
        
    </div>
    
    
</dt>
<dd class="">



    
    <div class="description">
        <p>Give a value for a standard matrix4 uniform</p>
    </div>
    

    

    

    
    
        

<table class="params">
    <thead>
	<tr>
		
		<th>Name</th>
		
		
		<th>Type</th>
		
		<th class="last">Description</th>
	</tr>
	</thead>
	
	<tbody>
	
	
        <tr class="">
            
                <td class="name"><code>uniform</code></td>
            
            
            
            <td class="type">
            
                
<span class="param-type">string</span>


                
            
            </td>

            

            <td  class="description last">
                
                <p>Uniform name</p></td>
        </tr>
	
	
	
        <tr class="">
            
                <td class="name"><code>value</code></td>
            
            
            
            <td class="type">
            
                
<span class="param-type">Array.&lt;number></span>


                
            
            </td>

            

            <td  class="description last">
                
                <p>Matrix value</p></td>
        </tr>
	
	
	</tbody>
</table>
    
    

    
<dl class="details">
    
        
    
    
    

    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
</dl>


    

    

    

    

    

    
</dd>

        
            
            
<dt class="">
    
    <div class="nameContainer">
        <div class="anchor" id="useProgram">
        </div>
        <h4 class="name">
            useProgram<span class="signature">(program)</span><span class="fa fa-arrow-circle-right"></span><span class="type-signature returnType">{boolean}</span>
            
            

        </h4>
        
        <div class="tag-source">
            <a href="https://github.com/openlayers/openlayers/blob/v6.13.0/src/ol/webgl/Helper.js">webgl/Helper.js</a>,
            <a href="https://github.com/openlayers/openlayers/blob/v6.13.0/src/ol/webgl/Helper.js#L813">line 813</a>
        </div>
        
    </div>
    
    
</dt>
<dd class="">



    
    <div class="description">
        <p>Use a program.  If the program is already in use, this will return <code>false</code>.</p>
    </div>
    

    

    

    
    
        

<table class="params">
    <thead>
	<tr>
		
		<th>Name</th>
		
		
		<th>Type</th>
		
		<th class="last">Description</th>
	</tr>
	</thead>
	
	<tbody>
	
	
        <tr class="">
            
                <td class="name"><code>program</code></td>
            
            
            
            <td class="type">
            
                
<span class="param-type">WebGLProgram</span>


                
            
            </td>

            

            <td  class="description last">
                
                <p>Program.</p></td>
        </tr>
	
	
	</tbody>
</table>
    
    

    
<dl class="details">
    
        
    
    
    

    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
</dl>


    

    

    

    

    
    
    


<h5>Returns:</h5>
Changed.
<br />

    

    
</dd>

        </dl>
    

    

    
</article>

</section>




        </div>
      </div>
      <script>prettyPrint();</script>
      <script src="scripts/linenumber.js"></script>
      <script src="scripts/main.js"></script>
    </div>
  </body>
</html>